<template>
	<view>
		<view style="margin-top: 100rpx;" v-if="noteList.length < 1">
			<u-empty
				text="暂无数据"
				icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
			</u-empty>
		</view>
		<view class="card" v-for="(item, index) in noteList" :key="index"
			@click="gotoPage('/pages/my/note/note?id='+item.id)"
			@longtap="onLongPress(item)">
			<view class="note-title u-border-bottom note-mar">{{item.title}}</view>
			<view class="note-body">
				<view class="u-body-item u-flex u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<text>{{item.content}}</text>
					</view>
				</view>
			</view>
			<view class="note-foot">
				<view>{{item.noteTime}}</view>
			</view>
		</view>
		
		<uni-fab
			:content="content"
			horizontal="right"
			vertical="bottom"
			direction="vertical"
			@trigger="trigger">
		</uni-fab>
		
		<u-action-sheet
			:actions="sheetList"
			:show="sheetShow"
			cancelText="取消"
			@close="sheetShow = false"
			@select="sheetSelect"
			closeOnClickOverlay>
		</u-action-sheet>
		
		<u-modal
			:showCancelButton="true"
			confirmText="确认删除"
			:show="mtShow"
			:title="mtTitle"
			@cancel="mtShow = false"
			@confirm="mtConfirm">
		</u-modal>
	</view>
</template>

<script>
	import { getList,del } from '@/api/note'
	export default {
		data() {
			return {
				mtShow:false,
				mtTitle:'',
				delInfo:'',
				sheetList: [
					{
						name:'删除',
					},
				],
				sheetShow:false,
				pageNum:1,
				noteList: [],
				content: [{
						path:'/pages/my/note/note',
						iconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/1ebfd874defd418298a65a0be3d0cc2b.png',
						selectedIconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/1ebfd874defd418298a65a0be3d0cc2b.png',
						text: '新建笔记',
						active: false
					},
				],
			}
		},
		onShow() {
			this.pageNum = 1
			this.noteList = []
			this.getNoteList()
		},
		onReachBottom(){
			this.pageNum += 1
			this.getNoteList()
		},
		onPullDownRefresh(){
			this.pageNum = 1
			this.noteList = []
			this.getNoteList()
			uni.stopPullDownRefresh()
		},
		methods: {
			onLongPress(item){
				this.sheetShow = true
				this.delInfo = item
			},
			sheetSelect(e){
				if(e.name === '删除'){
					this.mtTitle = '确认删除笔记 '+ this.delInfo.title + '?'
					this.mtShow = true
				}
			},
			mtConfirm(){
				this.delNote(this.delInfo.id)
				this.mtShow = false
			},
			async delNote(id){
				const { data } = await del(id)
				if (data.code == 200) {
					this.pageNum = 1
					this.noteList = []
					this.getNoteList()
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
					return
				}
			},
			async getNoteList(){
				let params = {
					pageNum:this.pageNum,
				}
				const { data } = await getList(params)
				if(data.code == 200 && data.rows.length > 0){
					this.noteList = [...this.noteList,...data.rows]
				}
			},
			trigger(e){
				this.gotoPage(e.item.path)
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
		color: #333333;
	}

	.card {
		background-color: white;
		display: block;
		border-radius: 20rpx;
		border: 1rpx hidden gray;
		margin: 20rpx 30rpx;
		padding: 35rpx 30rpx;
	}

	.note-mar {
		padding: 10rpx 0 30rpx 0;
		font-weight: bold;
		font-size: 30rpx;
	}

	.u-body-item {
		font-size: 30rpx;
		color: #5c5c5c;
		padding: 20rpx 10rpx;
		display: inline-block;
	}

	.note-foot {
		color: #8c8c8c;
		font-size: 25rpx;
	}
	
</style>
